在上一讲中，我们从 0 到 1 使用 webpack 为构建工具创建了一个现代化前端项目。从一步一步繁琐的配置当中，相信你已经体会到了创建一个现代化前端项目并不像我大学时候老师教的那样：可以用记事本直接“手撕”代码。

现代化的前端项目已经不再是在 HTML 的头部写一点 CSS 样式，在底部写几段脚本就可以了。首先，现代化的前端项目一般都会选用 React、Vue 等为代表的前端框架来提高效率，同时会使用 sass\less 等扩充 CSS 语言。除此之外，还需要搭建本地开发环境、在开发环境中进行热更新、构建并部署项目到服务器……

如果以上种种需要从 0 到 1 进行搭建的话，对于一个刚入门的前端新手而言还是有一定难度的。那么，对于刚入门的“新手”而言，怎么快速创建项目？或者对于一个“老手”而言，如何创建团队风格一致的项目呢？答案就是今天的主角——脚手架。

为了让你更好地了解前端脚手架相关知识，今天我会带你先剖析下为什么要使用脚手架，然后再给你介绍前端几个有代表性的脚手架工具，最后，还会手把手带你从头创建一个自己的脚手架工具。相信学完这些内容之后，你就可以解开脚手架的神秘面纱并且收获一个属于自己的脚手架工具了！

# 为什么要使用脚手架

在讲为什么要使用脚手架之前，我们先简单介绍下什么是脚手架。相信你在平时的生活中，路过工地时可能看到过下图这样的架子：

在建筑工程中，脚手架指的是：为了保证各施工过程顺利进行而搭建的工作平台。

那么在编程中，类比一下建筑工程，脚手架就是能够帮你将项目的框架代码生成好，然后开发同学只需要在脚手架上“添砖加瓦”就可以了。通过脚手架工具生成的代码通常包含了项目开发流程中所需的工作目录内的通用基础设施。

回到前端领域，在前端开发中，一个项目的基础建设需要投入大量的时间和精力，并且还需要至少两套的环境配置：线上环境和开发环境。这些最佳实践都是需要日积月累的试错得出，对于开发者的工程水平有一定的要求。脚手架就是可以搭建好项目的基础架构，然后开发者就可以将精力集中在业务代码的开发中了，这样可以极大程度地提高前期的开发效率。也就是说，前端脚手架要做的事情就是搭建基础架构代码。

经过上一讲的介绍，我们已经了解了在写业务需求代码之前需要怎么创建项目。那么，如果使用脚手架呢？

比如，我们选用 Vue Cli 来创建项目，那么只需要在安装完 Vue Cli 之后，执行 vue create hello-world就可以创建一个配置完善的 Vue 项目，同时还可以选择是否需要 TS、数据管理、路由管理等配置。

创建完之后，我们执行 npm run dev 就可以完成本地服务的搭建，将代码运行在本地服务器上，还有实时更新的功能，是不是很棒呢 ？(๑•̀ㅂ•́)و✧。

除了可以快速创建代码之外，使用相同脚手架创建出来的项目，拥有着相同的文件结构、代码风格、依赖模块、开发工具，这对于同一个团队而言，减少了团队成员之间的沟通和维护成本。

说了这么多，我们来总结一下到底为什么要使用前端脚手架。

• 方便快捷：我们只需要下载对应的脚手架依赖然后在命令行执行一行命令或者一些初始化信息，就可以将项目的框架搭建完成，整个用时十分钟左右，而自己搭建少则一两个小时，多则一两天。
• 最佳实践：不管我们使用的是官方提供的脚手架还是团队内部的脚手架，其中的配置或者模板肯定都是经过反复的试错之后提炼出来的最佳实践，我们使用脚手架相当于站在了巨人的肩膀上进行开发。
• 统一规范：团队的内部使用相同的脚手架创建出来的项目，具有相同的组织结构、依赖模块、工具配置，有利于项目的维护和团队的合作。

# 有代表性的前端脚手架工具

在刚入门的前端教程中，比如 “60 分钟快速入门 Vue”“React 入门看这篇就够了” 这类的文章中，都会直接使用 Vue Cli 或者 Create-React-App 来创建项目。那么其中的 Vue Cli、Create-React-App 就是脚手架工具。

Vue Cli 和 Create-React-App 是市面上最常见的成熟脚手架工具之一，它们二者都是为了特定的框架而诞生的脚手架（这点从名字也可以看得出来）。两者的使用姿势大同小异，都可以在终端交互式地询问用户需要创建的内容后，创建项目的基础结构并生成配置文件。

除了上述的两种只针对于特定框架的脚手架之外，还有一类就是以 Yeoman 为代表的通用性项目脚手架工具。根据一套模板，生成一个对应的项目结构，灵活且易扩展。

以上三种脚手架都是直接创建整个项目的脚手架，其实除了可以创建整个项目之外，脚手架还可以生产某一个文件或者某一段代码，这类的代表工具是 Plop。比如，你想在一个组件化或者模块化的项目中创建有固定文件结构或代码结构的新组件或者模块，就可以使用 Plop 更为便捷地进行创建。

那下面我们就来简单介绍这四种比较有代表性的前端脚手架—— Plop、Yeoman、Create-React-App 和 Vue-Cli，你可以对比着来学习。

# 1. Plop

Plop 是一款小而美的脚手架工具，官网对其的定义为：micro-generator framework。Plop 可以使用已有的模板文件批量生成代码，省去了手动复制粘贴的过程。你可以在你代码的任何地方创建 routes、helpers、controllers、components……

这里我找来了一个官网的示例图：我们可以自由选择 generator 生成一个项目（如图的 helper），也可以生成某一段代码。如图所示，执行 plop segment 后，输入 test-name-of-something 和 /index 后自动帮你在 /routes/index路径下创建了 index.html 、index.state.js 和 index.styl 三个文件，生成的内容来源于 generator 中定义的内容。

# 2. Yeoman

Yeoman 是一款老牌、通用的脚手架工具，与其说它是一个脚手架，不如说是一个脚手架的运行平台。其支持各种语言，比如 Web、Java、Python、C# 等。

作为早期的脚手架工具，Yeoman 不依赖于某个框架或者语言，你可以选择公开的生成器（generator）或者根据自身的需求编写不同的生成器，用不同的生成器去生成不同的项目或者代码片段。比如，你可以执行 yo generator-webapp 生成网站项目、yo generator-venv 生成 vue 项目（yo 是 Yeoman 的命令行管理工具）……

Yeoman 和 Plop 类似，代表的是一般开源框架的理念。不指定具体的语言和技术栈，更加底层并且更加灵活，其目的是让开发者可以快速生成生成器（generator），并快速生成项目或代码片段。同时，Yeoman 也是一个生成器平台，你可以直接使用 Yeoman 提供的三方生成器。

# 3. Create-React-App

和前面介绍的 Plop、Yeoman 不指定特定框架的脚手架生成器相比，Create-React-App（简称 CRA）和 Vue Cli 恰恰相反。

CRA 是一款 React 官方提供的 React 开发工具集，其中包含了 create-react-app 和 react-script 两个基础包。create-react-app 用于选择脚手架创建项目，而 react-script 是封装了项目启动、编译、测试等基础工具的运行时依赖包。

正是因为 CRA 将运行时的各项配置都封装在 react-script 中了，这大大降低了开发者的学习成本，你不需要选择使用哪个构建工具，不需要选择对应依赖包的版本，不需要去编写并测试那些繁琐的配置文件（特别是 webpack！），开箱即用！自己从 0 到 1 自己搭建过项目的同学都知道，要想成功地将项目启动，少则需要个把小时，多则需要一两天的时间 o(╥﹏╥)o，搭建项目两小时，开发十分钟。而使用 CRA，我们只需要执行 npx create-react-app your-app-name 就可以直接生成一个 React 项目。打开项目后，再执行 npm run start 就可以开发业务代码了！